<template>
	<div class="common-layout">
    <el-container>
      <el-header>
        <officeHeader>

        </officeHeader>
      </el-header>
      <el-main>
        <div class="main">
          <el-row>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Police  />
						</el-icon>
						<label class="t_label">智慧安全方向</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in polices"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>
				</el-col>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple-light" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Health  />
						</el-icon>
						<label class="t_label">健康云大数据</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in healths"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>  
				</el-col>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple-light" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Traffic  />
						</el-icon>
						<label class="t_label">智慧公共交通</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in traffices"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>  
				</el-col>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple-light" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Other  />
						</el-icon>
						<label class="t_label">其他...</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in others"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>  
				</el-col>
  			</el-row>
        </div>
      </el-main>
      <el-footer>
            <officeFooter>

            </officeFooter>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import officeHeader from '../components/officeHeader.vue';
import officeFooter from '../components/officeFooter.vue';




export default{
    components: {
    officeHeader,
    officeFooter
},
  data() {
			return {
				healths:[],
				traffices:[],
				others:[],
				polices:[]
			}
		},
mounted() {
      this.getPolices();
      this.getHealths();
	  this.getTraffices();
	  this.getOthers();
    },

    methods: {
			goIn() {
				this.$router.replace({
					path: '/appList'
				})
			},
      async getPolices(){
        const type = {type:"police"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.polices = res.data;
      },
      async getHealths(){
        const type = {type:"health"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.healths =res.data;
      },
      async getTraffices(){
        const type = {type:"traffic"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.traffices =res.data;
      },
	  async getOthers(){
        const type = {type:"other"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.others =res.data;
      }
		},
}
</script>

<style scoped>
.el-header{
  position: fixed;
  width: 100%;
  height: 100px;
  
  margin-left: auto;
}
.el-main{
  margin-top: 87px;
}
.el-footer{
    height: 160px;
}

.main{
     /* margin-top: 87px; */
    /* height: 1000px; */
}

.el-row {
	margin: 5px;
}
.el-timeline{
	margin-top: 20px;
}
.el-divider{
	width: 80%;
}
.t_label{
	padding-left: 10px;
	font-size: medium;
	font-weight: bolder;
}
.el-link{
	font-size: medium;
	font-weight: bold;
}
.el-timeline-item__timestamp{
	font-size: 30px;
}

</style>

